<div>
	<h1>New Invoice</h1>
	<label for="person_id" style="display: inline; padding-right: 20px">Person</label><input id="person_id" type="text" ng-model="invoice.person_id" required style="margin: 0;">
	<label for="due_date" style="display: inline; padding-right: 20px">Due Date (dd/mm/yyyy)</label><input id="due_date" type="text" ng-model="invoice.due_date" required style="margin: 0;">
	<br style="margin: 20px"/>
	<table id="invoice_items" class="table table-striped table-bordered">
		<thead>
			<th>Description</th>
			<th>Quantity</th>
			<th>Cost ($, each)</th>
			<th>Product ID</th>
			<th>&nbsp;</th>
		</thead>
		<tbody>
			<tr ng-repeat="item in invoice.items">
				<td>{{ item.description }}</td>
				<td><input type="number" ng-model="item.qty" required></td>
				<!-- TODO: input[number] disallows cents, probably want to allow it -->
				<td><input type="number" ng-model="item.cost" cents required></td>
				<td>{{ item.product_id }}</td>
				<td style="font-size: 1.2em; margin: 0;"><a ng-click="remove_line($index)">X</a></td>
			</tr>
		</tbody>
		<tbody>
			<tr>
				<td>&nbsp;</td>
				<th align="right" style="text-align: right;">Total</th>
				<td colspan="3">{{ cost_sum() | cents2dollars | currency }}</td>
			</tr>
		</tbody>
	</table>

	<div style="float: right; margin-right: 50px;">
		<a id="new_invoice" class="btn" ng-click="new_invoice($event)" ng-disabled="processing">New Invoice</a>
		<a id="submit_view" class="btn" ng-click="submit_view_invoice($event)" ng-disabled="processing">Save and View</a>
		<a id="submit_new" class="btn" ng-click="submit_new_invoice($event)" ng-disabled="processing">Save and New</a>
		<a id="submit_checkin" class="btn" ng-click="submit_checkin_invoice($event)" ng-disabled="processing">Card</a>
		<a id="submit_pay_checkin" class="btn" ng-click="submit_cash_checkin_invoice($event)" ng-disabled="processing" data-loading-text="Processing">Cash Received</a>
	</div>
</div>
<div>
	<h2>Add Product Line</h2>
	<select id="product_select" ng-model="product_select" ng-options="product.description group by product.category for product in product_list | orderBy: ['category_order', 'product_order']" style="width: 400px">
		<option value="">-- Choose Product --</option>
	</select>
	<a id="add_line" class="btn" ng-click="add_line()">Add</a>
</div>
<div>
	<h2>Add Manual Line</h2>
	<label for="manual_description" style="display: inline; padding-right: 20px">Description:</label><input type="text" id="manual_description" ng-model="manual.description" style="margin: 0;">
	<label for="manual_cost" style="display: inline; padding-right: 20px">Cost $</label><input type="text" id="manual_cost" cents ng-model="manual.cost" style="margin: 0;">
	<a id="add_manual" class="btn" ng-click="add_manual($event)">Add</a>
</div>
<div>
	<h2>Refund Existing Invoice</h2>
	<label for="refund_invoice_id" style="display: inline; padding-right: 20px">Invoice ID:</label><input type="number" id=refund_invoice_id" ng-model="refund.invoice_id" style="margin: 0;">
	<a id="refund_invoice" class="btn" ng-click="refund_invoice($event)">Refund Invoice</a>
</div>
